<template>
  <div> 
    <div>
      <van-swipe class="!bg-[#39a9ed] !h-[46vh]" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item class="relative overflow-hidden">
          <van-image width="100%" height="100%" fit="fill" :src="banner1" />
          <div class="z-10 absolute bottom-10 left-6 text-white">
            <div class="text-[12px] font-bold">
              {{ $t('forBetterLife') }}
            </div>
            <div class="text-[35px]">
              {{ $t('ByteDanceTitle') }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="m-6 mt-8">
      <div class="text-black text-[30px]">
        {{ $t('aboutUS') }}
      </div>
      <div class="mt-6 text-[12px] text-[#838f98]">
        {{ $t('aboutDesc') }}
      </div>
    </div>
    <div class="m-6 mt-8">
      <div class="text-black text-[30px]">
        {{ $t('ourMission') }}
      </div>
      <div class="mt-6 text-[12px] text-[#838f98]">
        {{ $t('ourMissionDesc') }}
      </div>
    </div>
    <div class="bg-[#f7f9fa] rounded-xl w-full p-6 mb-8 relative overflow-hidden" v-for="item in list">
      <h2 class="text-[16px] mb-4 ml-4 before:content-[''] before:block before:w-1  before:h-5 before:bg-[#3c8cff] before:absolute before:top-6 before:left-6">
        {{ $t(item.title) }}
      </h2>
      <div class="text-[#838f98] text-[12px]">
        {{ $t(item.content) }}
      </div>
    </div>
    <div class="bg-[#f7f9fa] w-full px-6 py-8 box-border">
      <h1 class="text-[30px] mb-4">
        {{ $t('foundationTeam') }}
      </h1>
      <van-image width="100%" height="100%" fit="fill" :src="team" />
    </div>
  </div>
</template>
<script setup lang="ts">
import banner1 from "@/assets/images/banner-1.jpg"

import team from "@/assets/images/about-bg.png"

const list = [
  { 
    title: 'basicText.basicTitle-1', 
    content: 'basicText.basicDesc-1' 
  },
  { 
    title: 'basicText.basicTitle-2', 
    content: 'basicText.basicDesc-2' 
  },
  { 
    title: 'basicText.basicTitle-3', 
    content: 'basicText.basicDesc-3' 
  },
  { 
    title: 'basicText.basicTitle-4', 
    content: 'basicText.basicDesc-4' 
  },
]
</script>

<style lang="less" scoped>
</style>
